<template>
    <dv-loading v-if="isLoading">
      <div color-white>
        Loading...
      </div>
    </dv-loading>    
    <div v-else-if="props.blockInfo == null">
        未配置
    </div>
    <div v-else-if="props.blockInfo.chartType == 'table'">
      <dv-scroll-board :config="options" class="block-chart"/>
    </div>
    <div v-else-if="options == null">加载中...</div>

    <dv-capsule-chart :config="options" class="block-chart" :style="{height:props.height,width:props.width}"
      v-else-if="props.blockInfo.chartType == 'capsule'"/>

    <dv-active-ring-chart :config="options" class="block-chart" :style="{height:props.height,width:props.width}"
      v-else-if="props.blockInfo.chartType == 'ring'"/>

    <dv-water-level-chart :config="options" class="block-chart" :style="{height:props.height,width:props.width}"
      v-else-if="props.blockInfo.chartType == 'level'"/>

    <dv-percent-pond :config="options" class="block-chart" :style="{height:props.height,width:props.width}"
      v-else-if="props.blockInfo.chartType == 'percent'"/>
      
    <dv-charts :option="options" class="block-chart" :style="{height:props.height,width:props.width}" v-else/>
</template>

<script setup>
import { dsData } from "@/api/dev/modelData";

const { proxy } = getCurrentInstance();

const isLoading = ref(true);
const chartData = ref(null);
const options = ref(null);
const timer = ref(null);

const props = defineProps({
  // 报表信息
  blockInfo: {
    type: Object,
    default: null,
  },
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  refresh:  {
    type: Number,
    default: 0
  }
});

watch(() => props.blockInfo, val => {
  if(val){
    loadData();
  }else{
    isLoading.value = true;
  }
},{ deep: true, immediate: true });

watch(() => props.refresh, val => {
  if(timer.value){
    clearInterval(timer.value);
  }

  if(props.refresh){
    setInterval(() => {
      if(props.blockInfo != null && props.blockInfo.dsCode != null){
        loadData();
      }
    }, props.refresh);
  }
},{ deep: true, immediate: true });


/** 加载数据 */
function loadData(){
  console.log(props.blockInfo);
    isLoading.value = true;
  dsData(props.blockInfo.dsCode, props.queryParams).then(response=>{
    chartData.value = response.data;
    initChart();
  })
}

/** 报表初始化入口 */
function initChart() {
  if(props.blockInfo && props.blockInfo.chartType == 'bar'){
    options.value = setBarChart();
    isLoading.value = false;
  }if(props.blockInfo && props.blockInfo.chartType == 'capsule'){
    options.value = setCapsuleChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'line'){
    options.value = setLineChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'raddar'){
    options.value = setRaddarChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'gauge'){
    options.value = setGaugeChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'level'){
    options.value = setLevelChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'percent'){
    options.value = setPercentChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'pie'){
    options.value = setPieChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'ring'){
    options.value = setRingChart();
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'cust'){
    options.value = setCustChart(chartData.value);
    isLoading.value = false;
  }else if(props.blockInfo && props.blockInfo.chartType == 'table'){
    options.value = setTableChart();
    isLoading.value = false;
  }else{
    proxy.$modal.msgError("不支持报表类型");
  }
  console.log(props.blockInfo.dsCode+' '+props.blockInfo.chartType)
  console.log(options.value)
}

/** 生成列表 */
function setTableChart() {
  let dataOption = JSON.parse(props.blockInfo.dataOption);
  let header = [];
  for( let f in dataOption){
    header.push(dataOption[f]);
  }
  let rows = [];
  for(let i=0;i<chartData.value.length;i++){
      let row = [];
      for( let f in dataOption){
        row.push(chartData.value[i][f]);
    }
    rows.push(row);
  }
  return {
    header: header,
    data: rows,
    index: true,
    columnWidth: [50],
    align: ['center'],
  };
}

/** 自定义图表 */
function setCustChart(data){
  let option = {};
  eval(props.blockInfo.dataOption);
  return option;
}

/** 仪表盘 */
function setGaugeChart(){
  let options = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}'
        },
        data: [
          {
            value: 50
          }
        ]
      }
    ]
  }
  options.series[0].name = props.blockInfo.name;
  
  options.series[0].data[0].value = chartData.value;
  return options;
}

/** 进度池 */
function setPercentChart(){
  let options = { value: 66};  
  options.value = chartData.value;
  return options;
}

/** 水位图 */
function setLevelChart(){
  let options = { value: [], shape: 'roundRect'};  
  if(Array.isArray(chartData.value)){
   chartData.value.forEach(e=>{
      options.value.push(e.value);
    })
  }else{
    options.value[0] = chartData.value;
  }
  return options;
}

/** 雷达图 */
function setRaddarChart(){
  let options = {
    legend: {
      data: ['raddar1']
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: 'Marketing', max: 25000 }
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'raddar1'
          }
        ]
      }
    ]
  }
  
   chartData.value.forEach(e=>{
    options.radar.indicator.push({max:e.maxs, name:e.label});
    options.series[0].data.push(e.value);
  })
  return options;
}

/** 折线图 */
function setLineChart(){
  let options = {
    xAxis: {
      data: [],
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {},
    series: [
      {
        data: [],
        type: 'line'
      }
    ]
  }
  
  chartData.value.forEach(e=>{
    options.xAxis.data.push(e.label);
    options.series[0].data.push(e.value);
  })
  return options;
}

/** 柱状图 */
function setBarChart(){
   let options = {
    xAxis: {
      data: [],
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {},
    series: [
      {
        data: [],
        type: 'bar'
      }
    ]
  }
  
  chartData.value.forEach(e=>{
    options.xAxis.data.push(e.label);
    options.series[0].data.push(e.value);
  })
  return options;
}

/** 胶囊图 */
function setCapsuleChart(){
   let options = {data:[]}
  
  chartData.value.forEach(e=>{
    options.data.push({name:e.label, value:e.value});
  })
  return options;
}

/** 环图 */
function setRingChart(){
   let options = {
  lineWidth: 24,
  digitalFlopStyle: {
    fill: 'pink',
  },
  data: []
}
  
  chartData.value.forEach(e=>{
    options.data.push({name:e.label, value:e.value});
  })
  return options;
}

/** 饼图 */
function setPieChart(){
   let options = {
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    legend: {},
    series: [
      {
        data: [],
        type: 'pie'
      }
    ]
  }  
  chartData.value.forEach(e=>{
    options.series[0].data.push({value:e.value, name:e.label});
  })
  return options;
}
</script>
<style scoped>
  .block-chart {
    height: calc(100% - 5px);
    width: 100%;
    flex: 1;
    display: flex;
    padding-top: 20px;
    box-sizing: border-box;
  }
</style>